<template>
  <div class="fang">
    <header>
      <div class="forms">
        <van-icon name="arrow-left" />
        <div class="sear">
          <span @click="handleCity"
            >{{ city.label }}<i class="iconfont icon-triangle-down"></i
          ></span>
          <form action="">
            <i class="iconfont icon-fangdajing" @click="hanldeGo1"></i>
            <input type="text" placeholder="请输入小区或地址" />
          </form>
        </div>
        <i class="iconfont icon-dizhi-01"></i>
      </div>
    </header>
    <main>
      <!-- 四个一排点击 -->
      <div class="si">
        <van-dropdown-menu>
          <van-dropdown-item title="区域">
            <van-picker
              :columns="choose"
              value-key="label"
              default-index="1"
              @change="onChange1"
            />
          </van-dropdown-item>
          <van-dropdown-item title="方式">
            <van-picker :columns="rent" value-key="label" @change="onChange2" />
          </van-dropdown-item>

          <van-dropdown-item title="租金">
            <van-picker
              :columns="price"
              value-key="label"
              @change="onChange3"
            />
          </van-dropdown-item>
        </van-dropdown-menu>
        <van-cell is-link @click="showPopup"
          ><span>筛选<b></b></span
        ></van-cell>
        <van-popup
          v-model="show"
          position="right"
          :style="{ height: '100%', width: '80%' }"
        >
          <main>
            <!--户型  -->
            <div class="hu">
              <p>户型</p>
              <li>
                <span v-for="(v, i) in room" :key="i" class=".active">{{ v.label }}</span>
              </li>
            </div>
            <!-- 朝向 -->
            <div class="chao">
              <p>朝向</p>
              <li>
                <span v-for="(v, i) in oriented" :key="i" class=".active">{{ v.label }}</span>
              </li>
            </div>
            <!-- 楼层 -->
            <div class="floor">
              <p>朝向</p>
              <li>
                <span v-for="(v, i) in floor" :key="i" class=".active">{{ v.label }}</span>
              </li>
            </div>
            <!-- 房屋亮点 -->
            <div class="house">
              <p>朝向</p>
              <li>
                <span v-for="(v, i) in liang" :key="i" class=".active">{{ v.label }}</span>
              </li>
            </div>
          </main>
          <footer>
            <a>清除</a>
            <a class="sure">确定</a>
          </footer>
        </van-popup>
      </div>
      <!-- 图文混排 -->
      <div class="hun">
        <dl v-for="v in houses" :key="v.id">
          <dt>
            <img :src="v.houseImg" alt="" />
          </dt>
          <dd @click="handleDetail(v)">
            <h3>{{ v.desc }}</h3>
            <p>{{ v.title }}</p>
            <span>{{ v.tags[0] }}</span>

            <b>{{ v.price }}元/月</b>
          </dd>
        </dl>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../utils/request";
import { mapState } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      houses: [],
      show1: false,
      area: {},
      liang: [],
      floor: [],
      oriented: [],
      price: [],
      rent: [],
      room: [],
      di: {},
      choose: [],
      show: false,
    };
  },
  created() {
    /// vant轻提示
    this.getHouse();
    //筛选的条件
    this.shai();
  },
  computed: {
    ...mapState(["city"]),
  },
  methods: {
    shai() {
      axios.get(`/houses/condition?id=${this.city.value}`).then((res) => {
        console.log(res, "111");
        this.choose.push(res.data.body.area);
        this.choose.push(res.data.body.subway);

        this.liang = res.data.body.characteristic; //房屋亮点
        this.floor = res.data.body.floor; //楼层
        this.oriented = res.data.body.oriented; //方向
        this.price = res.data.body.price;
        this.rent = res.data.body.rentType;
        this.room = res.data.body.roomType;
        console.log(this.room);
      });
    },
    getHouse() {
      axios.get(`/houses?cityId=${this.city.value}`).then((res) => {
        // console.log(res,'222');
        if (res.data.status === 200) {
          this.houses = res.data.body.list;
        }
      });
    },
    hanldeGo1() {
      this.$router.go(-1);
    },
    handleDetail(v) {
      // console.log(v)
      this.$router.push({ path: "/detail", query: { id: v.houseCode } });
    },
    handleCity() {
      this.$router.push("/index");
    },
    showPopup() {
      this.show = true;
    },
    //第一个

    onChange1(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onChange2(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onChange3(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
  },
};
</script>

<style lang='scss' scoped>
.fang {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  header {
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #ccc;
    padding: 0 0.1rem;
  }
}
.forms {
  width: 100%;
  height: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .sear {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 0.05rem;
    span {
      width: 1.5rem;
      text-align: center;
      i {
        color: #000;
      }
    }
    form {
      flex: 1;
      display: flex;
      align-items: center;
      border-radius: 0.12rem;
      i {
        width: 0.4rem;
        text-align: center;
        color: #000;
      }
      input {
        flex: 1;
        height: 0.64rem;
        border: none;
        outline: none;
      }
    }
  }
  i {
    margin: 0 0.1rem;
    color: #000;
    font-size: 16px;
  }
}
main {
  background-color: #fff;

  .si {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: #ccc;
    display: flex;
    justify-content: space-between;
    .van-dropdown-menu {
      flex: 1;
    }
    .van-cell {
      width: 100px;
    }
    .van-popup {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 12px;
      background: #fff;
      main {
        flex: 1;
        overflow-y: scroll;
        span.active {
          border: 1px solid #21b97a;
          color: #21b97a;
          background-color: #defaef;
        }
      }
      .hu {
        width: 100%;
        border-bottom: 1px solid #ccc;

        > p {
          line-height: 20px;
          margin: 20px auto;
          font-size: 16px;
        }
        li {
          margin: 20px 0;
          display: flex;
          flex-wrap: wrap;
          span {
            display: inline-block;
            height: 32px;
            width: 70px;
            margin: 0 14px 11px 0;
            border: 1px solid #ddd;
            border-radius: 3px;
            line-height: 32px;
            text-align: center;
            font-size: 12px;
            color: #888;
          }
        }
      }
      .chao {
        width: 100%;
        border-bottom: 1px solid #ccc;

        > p {
          line-height: 20px;
          margin: 20px auto;
          font-size: 16px;
        }
        li {
          margin: 20px 0;
          display: flex;
          flex-wrap: wrap;
          span {
            display: inline-block;
            height: 32px;
            width: 70px;
            margin: 0 14px 11px 0;
            border: 1px solid #ddd;
            border-radius: 3px;
            line-height: 32px;
            text-align: center;
            font-size: 12px;
            color: #888;
          }
        }
      }
      .floor {
        width: 100%;
        border-bottom: 1px solid #ccc;

        > p {
          line-height: 20px;
          margin: 20px auto;
          font-size: 16px;
        }
        li {
          margin: 20px 0;
          display: flex;
          flex-wrap: wrap;
          span {
            display: inline-block;
            height: 32px;
            width: 70px;
            margin: 0 14px 11px 0;
            border: 1px solid #ddd;
            border-radius: 3px;
            line-height: 32px;
            text-align: center;
            font-size: 12px;
            color: #888;
          }
        }
      }
      .house {
        width: 100%;
        border-bottom: 1px solid #ccc;

        > p {
          line-height: 20px;
          margin: 20px auto;
          font-size: 16px;
        }
        li {
          margin: 20px 0;
          display: flex;
          flex-wrap: wrap;
          span {
            display: inline-block;
            height: 32px;
            width: 70px;
            margin: 0 14px 11px 0;
            border: 1px solid #ddd;
            border-radius: 3px;
            line-height: 32px;
            text-align: center;
            font-size: 12px;
            color: #888;
          }
        }
      }
      footer {
        line-height: 40px;
        display: flex;
        border: 1px solid #21b97a;
        align-items: center;
        text-align: center;
        font-size: 16px;
        a {
          color: #21b97a;
          background: #fff;
        }
        a:nth-of-type(1) {
          width: 35%;
        }
        .sure {
          color: #fff;
          background-color: #21b97a;
          width: 65%;
        }
      }
    }
  }
}

.style-btnBox {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  border-top: 1px solid #eee;
  .style-cancel {
    text-align: center;
    box-sizing: border-box;
    flex: 1;
    margin-left: 0.16rem;
    min-width: 0.2rem;
  }
  .style-submit {
    flex: 1;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #fff;
    background-color: #21b97a;
  }
}
.van-popup {
  height: 100%;
  background-color: #afb2b3;
}
.rowgroup {
  width: 100%;
  height: auto;
  dl {
    width: 100%;
    height: 2.4rem;
    display: flex;
    align-items: center;
    padding: 0.2rem;
    border-bottom: 1px solid #eee;
    dt {
      width: 2.1rem;
      height: 100%;
      margin: 0 0.2rem;
      img {
        width: 2.1rem;
        height: 1.6rem;
      }
    }
    dd {
      flex: 1;
      h3 {
        font-size: 15px;
        letter-spacing: 0;
        overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        // vertical-align: middle;
      }
      p {
        font-size: 12px;
        color: #afb2b3;
        padding: 0.2rem 0;
      }
      span {
        color: #fa5741;
      }
    }
  }
}

.hun {
  width: 100%;
  padding: 10px;
  dl {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    dt {
      width: 100px;
      height: 80px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    dd {
      display: block;
      margin-left: 14px;
      line-height: 22px;
      span {
        padding: 4px;
        background: aquamarine;
      }
      b {
        display: block;
        color: red;
        font-size: 14px;
      }
    }
  }
}
</style>